<!--
 * @Date: 2023-03-26 09:18:42
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-26 09:44:19
 * @FilePath: \A19\frontend\src\components\util\Transfer.vue
-->
<template>
  <ElButton
    plain
    v-if="poss"
    style="margin: 10px; float: right"
    @click="dialogVisible = true"
    >数据导出</ElButton
  >

  <el-dialog v-model="dialogVisible" title="数据导出" width="40%">
    <div style="text-align: center">
      <el-transfer
        v-model="value"
        filterable
        :filter-method="filterMethod"
        :titles="[' ', '导出项']"
        filter-placeholder="搜索"
        :data="datalist"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="exportD"> 导出 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { TransferDataItem } from "element-plus";
import { ref, toRefs, computed } from "vue";

const props = defineProps<{
  poss: boolean;
  datas: { _id: string; name: string }[];
  getSelected: Function;
}>();
const { poss, datas } = toRefs(props);

const dialogVisible = ref(false);
const value = ref([]);
const datalist = computed(() => {
  return datas.value.map((data) => {
    return {
      key: data._id,
      label: data.name,
    };
  });
});
const filterMethod = (query: string, item: TransferDataItem) => {
  return item.label.toLowerCase().includes(query.toLowerCase());
};

const exportD = () => {
  // dialogVisible.value = false
  if(value.value.length === 0){
    ElMessage.warning('请选择导出项')
    return
  }
  props.getSelected(value.value)
  dialogVisible.value = false
};
</script>

<style lang="less" scoped></style>
